<!-- 图片要求提示 -->
<div class="mt-0 small">
    <span class="text-danger">*</span>商品轮播图,要求：640x640像素以上，宽高比例为1:1或3:4，且宽高均大于480px，大小3M内, 支持JPG/PNG, 拖拽可调整顺序
</div>
<div class="card mb-3 border-0">
    <div class="card-body border-0 p-1">
        <div class="image-upload-container">
            <!-- 预览区域（包含上传按钮） -->
            <div class="image-preview d-flex flex-wrap gap-3 align-items-start" id="mainImagePreview">
                <!-- 上传按钮卡片 -->
                <div class="upload-card position-relative" id="uploadTrigger">
                    <div class="upload-btn-content">
                        <i class="bi bi-camera fs-3 text-dark"></i>
                        <div class="mt-2 text-dark">上传主图</div>
                    </div>
                    <input type="file" class="d-none" id="mainImages" name="main_images" multiple accept="image/jpeg,image/png">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 图片裁剪模态框 -->
<div class="modal fade" id="cropModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">图片裁剪</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
                <div class="cropper-container" style="max-height: 60vh;">
                    <img id="cropperImage" src="" class="img-fluid">
                </div>
                <div class="mt-3">
                    <button class="btn btn-sm btn-outline-secondary" id="rotateLeft">
                        <i class="bi bi-arrow-counterclockwise"></i> 左旋转
                    </button>
                    <button class="btn btn-sm btn-outline-secondary mx-2" id="rotateRight">
                        <i class="bi bi-arrow-clockwise"></i> 右旋转
                    </button>
                    <button class="btn btn-sm btn-danger" id="deleteImage">
                        <i class="bi bi-trash"></i> 删除图片
                    </button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmCrop">确认裁剪</button>
            </div>
        </div>
    </div>
</div>

<style>

    /* 拖动图片样式 */
    .preview-item.dragging {
        opacity: 0.5;
        border: 2px dashed #198754;
    }

    .preview-item.dropzone {
        border: 2px dashed #0d6efd;
        background-color: rgba(13, 110, 253, 0.1);
    }

    .image-preview {
        min-height: 150px;
    }



    /* 上传卡片样式 */
    .upload-card {
        width: 120px;
        height: 120px;
        border: 2px dashed #ddd;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        background: white;
    }
    .upload-card:hover {
        border-color: #198754;
        background: #f8f9fa;
    }
    .upload-btn-content {
        text-align: center;
        padding: 10px;
    }

    /* 预览图片样式 */
    .preview-item {
        position: relative;
        width: 120px;
        height: 120px;
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
    }
    .preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 上传进度条 */
    .upload-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: rgba(0,0,0,0.1);
    }
    .progress-bar {
        height: 100%;
        background: #198754;
        width: 0%;
        transition: width 0.3s;
    }

    /* 操作按钮 */
    .preview-actions {
        position: absolute;
        top: 5px;
        right: 5px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .preview-item:hover .preview-actions {
        opacity: 1;
    }
    .btn-preview-action {
        width: 24px;
        height: 24px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
</style>



<!-- 引入必要的库 -->
{#<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" rel="stylesheet">#}
{#<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet">#}
{#<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>#}